{% extends "wiki/doctype/wiki_page/templates/wiki_page.html" %}

{%- block head_include %}
{{ super() }}
{{ include_style('wiki.bundle.css') }}

{{ include_style('contributions.bundle.css') }}

{% endblock -%}


{% block page_content %}
<input class="d-none" type="text" name="limit" value="2">

<div class='contributions-header'> {{pilled_title}} </div>

<div class="frappe-card">
	<div class="table-area">
		<div class="list-jobs table-responsive">
			{% if contributions %}
			<table class="table">
				<thead class="white">
					<tr>
						<td style="width: 20%">{{ _("Status") }}</th>
						<td style="width: 30%">{{ _("Message") }}</th>
						<td style="width: 30%">{{ _("Last update on") }}</th>
						<td style="width: 20%">{{ _("Link") }}</th>
					</tr>
				</thead>
				<tbody>
					{% for j in contributions %}
					<tr>
						<td class="worker-name"><span class="indicator-pill no-margin {{j.color}}">&nbsp;&nbsp;{{
								j.status }}</span></td>
						<td>{{ j.message }}</td>
						<td>{{ j.creation }}</td>
						<td> <a class="btn btn-default btn-xs center" href="{{ j.edit_link }}">Open Contribution</a>
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
			{% else %}
			<div class="no-background-jobs">
				<img src="/assets/frappe/images/ui-states/list-empty-state.svg" alt="Empty State">
				<p class="text-muted">{{ _("No Contributions Made") }}</p>
			</div>
			{% endif %}

		</div>
	</div>
</div>
{% if contributions %}
<br>
<div> <button class='btn pull-right get_contributions'>More</button></div>
<br>
<br>

{% endif %}

{% endblock %}

{% block base_scripts %}
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>

{{ include_script("frappe-web.bundle.js") }}
{{ include_script('bootstrap-4-web.bundle.js') }}

<script>
	frappe.ready(
		() => {
			$('.get_contributions').click(() => {
				frappe.call({
					method: "wiki.www.contributions.get_contributions",
					args: {
						limit: parseInt($('[name="limit"]').val()) + 10,
					},
					callback: (response) => {

						if (response.message) {
							$('.list-jobs tbody').empty()
							$('[name="limit"]').val(parseInt($('[name="limit"]').val()) + 10)
							for (contribution of response.message.contributions) {
								$('.list-jobs tbody').append($(`	<tr>
									<td class="worker-name"><span class="indicator-pill no-margin ${contribution.color}">&nbsp;&nbsp;
										${contribution.status}</span></td>
									<td>${contribution.message}</td>
									<td>${contribution.creation}</td>
									<td> <a class="btn btn-default btn-xs center" href="${contribution.edit_link}">Open Contribution</a>
									</td>
								</tr>

							`))
							}
						}

					},
					freeze: true,
				})
			});
		}
	)
</script>


{% endblock %}

{% block page_sidebar %}
{% endblock %}